<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '共享书屋',
	},
}
</route>

<template>
	<view class="page-sharedBookstore" v-if="thisPage !== 0">
		<fly-navbar leftText="共享书屋" fixed />
		<view class="w-full pt-6 pb-3 box-border bg-[#ffffff]">
			<view class="w-full pl-2 pr-3 box-border">
				<scroll-view scroll-x class="w-full h-[63rpx] whitespace-nowrap">
					<view
						class="h-full px-4 inline-flex justify-center items-center rounded-[30rpx] text-[25rpx] mr-[25rpx]"
						:style="
							currentindex == 0
								? 'background: #2ba5e0; color: #fff'
								: 'background: #f3f3f5; color: #303030'
						"
						@tap="linkTo(0)"
					>
						我的借阅
					</view>
					<view
						class="h-full px-4 inline-flex justify-center items-center rounded-[30rpx] text-[25rpx] mr-[25rpx]"
						:style="
							currentindex == 1
								? 'background: #2ba5e0; color: #fff'
								: 'background: #f3f3f5; color: #303030'
						"
						@tap="linkTo(1)"
					>
						图书查询
					</view>
					<view
						class="h-full px-4 inline-flex justify-center items-center rounded-[30rpx] text-[25rpx] mr-[25rpx]"
						:style="
							currentindex == 2
								? 'background: #2ba5e0; color: #fff'
								: 'background: #f3f3f5; color: #303030'
						"
						@tap="linkTo(2)"
					>
						借阅卡管理
					</view>
				<!-- 	<view
						class="h-full px-4 inline-flex justify-center items-center rounded-[30rpx] text-[25rpx] mr-[25rpx]"
						:style="
							currentindex == 3
								? 'background: #2ba5e0; color: #fff'
								: 'background: #f3f3f5; color: #303030'
						"
						@tap="linkTo(3)"
					>
						数据统计
					</view> -->
				</scroll-view>
			</view>
		</view>

		<!-- 我的借阅 -->
		<Records
			v-show="currentindex == 0"
			ref="recordsRef"
			:currentindex="currentindex"
			@bindCard="bindCard"
		></Records>

		<!-- 图书查询 -->
		<Search v-show="currentindex == 1" ref="searchRef"></Search>

		<!-- 借阅卡管理 -->
		<Cards v-show="currentindex == 2" ref="cardsRef"></Cards>
	</view>
	<no-page
		v-if="thisPage == 0"
		height="100%"
		:type="'btn'"
		:title="title"
		:btnTitle="'返回首页'"
		:style="'margin-top: 250rpx'"
		@click="retry('/pages/index/index')"
	></no-page>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store';
import { toAuthPage } from '@/utils/jump';
import Records from '@/components/sharebookstore/records.vue';
import Search from '@/components/sharebookstore/search.vue';
import Cards from '@/components/sharebookstore/cards.vue';
import { getSchoolHasSharedBookstore } from '@/service/shareBookStore';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const currentindex = ref(0);
const recordsRef = ref(null);
const searchRef = ref(null);
const cardsRef = ref(null);
const btnTitle = ref('返回首页');
const linkTo = (index: number) => {
	currentindex.value = index;
	if (index === 0) {
		recordsRef.value.getList();
	} else if (index === 1) {
		searchRef.value.getList();
	} else if (index === 2) {
		cardsRef.value.getCardInfo();
	} else {
		uni.navigateTo({
			url:'/pages/web-view/index?img=1'
		})
	}
};

const thisPage = ref(-1);
const title = ref('您所在的学校暂未开通此服务！');

const getIsOpenStatus = async () => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await getSchoolHasSharedBookstore({
			student_id: userInfo.value.student_id,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = -1;
		} else {
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};
const retry = url => {
	if (!url) return;
	if (!userInfo.value.student_id) {
		// 分享或者进入未登录
		toAuthPage({}, { type: 'redirectTo', url: '/pages/index/index' });
		return;
	}
	uni.redirectTo({ url });
};
const bindCard = () => {
	currentindex.value = 2;
};
onShow(() => {
	if (!userInfo.value.student_id) {
		// 分享或者进入未登录
		thisPage.value = 0;
		title.value = '还没有登录';
		btnTitle.value = '登录';
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		return;
	}
	getIsOpenStatus();
});
</script>

<style lang="scss">
.page-sharedBookstore {
	.ranking-img {
		width: 75rpx;
		height: 75rpx;
		background: #dbdbdb;
		border: 1rpx solid #f3f1f3;
		border-radius: 50%;
	}

	.ranking-item:last-child {
		margin-bottom: 0;
	}

	.ranking-rule {
		background: #62baf9;
	}

	.ranking-point {
		background: #f3f3f5;
	}

	.rule-modal {
		background: linear-gradient(0deg, #fff, #aac6f8);
	}

	.rule-box {
		width: 540rpx;
		max-height: 700rpx;
		padding-bottom: 60rpx;
		overflow-y: auto;
		box-shadow:
			0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
			0rpx 0rpx 14rpx 0rpx rgb(0 0 0 / 7%);
	}

	.items-back {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 63rpx;
		height: 63rpx;
		background: #f3f3f5;
		border-radius: 50rpx;
	}

	.plan-item {
		box-shadow:
			0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
			0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
	}

	.items-tips {
		background: #f3f3f5;
		border-radius: 30rpx;
	}

	.sharedBookstore_Borrowingbox {
		display: block;
		float: left;
		width: 100%;
		padding-bottom: 20rpx;
	}

	.sharedBookstore_Borrowing_topBox {
		float: left;
		width: 100%;

		.sharedBookstore_Borrowing_topBox_left {
			float: left;
			width: calc(100% - 160rpx - 20rpx);
			height: 50rpx;
			margin-right: 20rpx;
			overflow: hidden;
			font-size: 30rpx;
			line-height: 50rpx;
			color: #303030;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.sharedBookstore_Borrowing_topBox_right {
			float: right;
			width: 160rpx;
			height: 50rpx;

			.sharedBookstore_Borrowing_topBox_right_cont1 {
				width: 100%;
				height: 50rpx;
				font-size: 26rpx;
				line-height: 50rpx;
				color: #fff;
				text-align: center;
				background-color: #f4c421;
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
			}

			.sharedBookstore_Borrowing_topBox_right_cont2 {
				width: 100%;
				height: 50rpx;
				font-size: 26rpx;
				line-height: 50rpx;
				color: #fff;
				text-align: center;
				background-color: #f9e9b4;
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
			}
		}
	}

	.sharedBookstore_Borrowing_bottomBox {
		float: left;
		width: 100%;
		margin-top: 10rpx;

		.sharedBookstore_Borrowing_bottomBox_img {
			float: left;
			width: 38rpx;
			height: 40rpx;
		}

		.sharedBookstore_Borrowing_bottomBox_textBox {
			float: left;
			width: auto;
			margin-left: 20rpx;

			text {
				font-size: 30rpx;
				line-height: 40rpx;
			}
		}
	}

	.sharedBookstore_bookSearchbox {
		display: block;
		float: left;
		width: 100%;
		padding-bottom: 20rpx;

		.sharedBookstore_bookSearchbox_defaultBox {
			float: left;
			width: calc(100% - 37rpx - 37rpx);

			.sharedBookstore_bookSearchbox_defaultBox_name {
				float: left;
				width: calc(100% - 37rpx - 30rpx - 180rpx);
				height: 45rpx;
				margin: 0 10rpx 0 20rpx;
				overflow: hidden;
				font-size: 30rpx;
				line-height: 45rpx;
				color: #303030;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.sharedBookstore_bookSearchbox_defaultBox_right {
				float: left;
				width: 180rpx;
				height: 45rpx;
				overflow: hidden;
				font-size: 24rpx;
				line-height: 45rpx;
				text-align: right;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.sharedBookstore_bookSearchbox_searchBox {
			float: left;
			width: calc(100% - 37rpx - 37rpx);

			.sharedBookstore_bookSearchbox_searchBox_left {
				float: left;
				width: calc(100% - 10rpx - 150rpx);

				text {
					display: block;
					float: left;
					height: 40rpx;
					overflow: hidden;
					line-height: 40rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.sharedBookstore_bookSearchbox_searchBox_right {
				float: right;
				width: 150rpx;
			}
		}
	}

	.sharedBookstore_borrowingCard {
		float: left;
		width: calc(100% - 37rpx - 37rpx);
		padding: 0 37rpx;

		.sharedBookstore_borrowingCard_unboundBox {
			float: left;

			.sharedBookstore_borrowingCard_unboundBox_topBox {
				position: relative;
				z-index: 2;
				float: left;
				width: 100%;
				height: 410rpx;
				margin-top: 40rpx;

				.sharedBookstore_borrowingCard_unboundBox_topBoxIMG {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					width: 100%;
					height: 410rpx;
				}
			}

			.sharedBookstore_borrowingCard_unboundBox_middleBox {
				float: left;
				width: 100%;
				margin-top: 60rpx;

				.viewsharedBookstore_borrowingCard_unboundBox_middleBox_searchBox {
					float: left;
					width: calc(100% - 60rpx);
					height: 80rpx;
					padding: 0 30rpx;
					background-color: #f3f3f5;
					border-radius: 80rpx;

					input {
						display: block;
						float: left;
						width: calc(100% - 49rpx - 10rpx);
						height: 80rpx;
						margin-right: 10rpx;
						font-size: 30rpx;
						line-height: 80rpx;
						color: #303030;
						border: 0;
					}

					input-placeholder {
						color: #989899;
					}

					image {
						float: right;
						width: 36rpx;
						height: 34rpx;
						margin-top: 23rpx;
					}
				}

				.viewsharedBookstore_borrowingCard_unboundBox_middleBox_bntBox {
					position: relative;
					z-index: 1;
					float: left;
					width: calc(100% - 80rpx);
					height: 90rpx;
					margin: 100rpx 40rpx 0;

					image {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						width: 100%;
						height: 90rpx;
					}

					text {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 2;
						display: block;
						width: 100%;
						height: 90rpx;
						overflow: hidden;
						font-size: 34rpx;
						line-height: 90rpx;
						color: #f4f7f4;
						text-align: center;
					}
				}
			}
		}

		.sharedBookstore_borrowingCard_bindBox {
			float: left;

			.sharedBookstore_borrowingCard_bindBox_topBox {
				position: relative;
				z-index: 2;
				float: left;
				width: 100%;
				height: 410rpx;
				margin-top: 40rpx;

				.sharedBookstore_borrowingCard_bindBox_topBoxIMG {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					width: 100%;
					height: 410rpx;
				}

				.sharedBookstore_borrowingCard_bindBox_topBox_textBox {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					width: calc(100% - 40rpx);
					height: 370rpx;
					padding: 20rpx;
					overflow: hidden;

					.sharedBookstore_borrowingCard_bindBox_topBox_textBox_top {
						float: left;
						width: 100%;
						font-size: 30rpx;
						line-height: 40rpx;
						color: #fff;
						text-shadow: 0 4px 4px rgb(114 60 8 / 30%);

						text {
							margin: 0 20rpx;
						}
					}

					.sharedBookstore_borrowingCard_bindBox_topBox_textBox_middle {
						float: left;
						width: 100%;
						margin-top: 80rpx;
						font-size: 60rpx;
						line-height: 80rpx;
						color: #fff;
						text-align: center;
						text-shadow: 0 4px 4px rgb(114 60 8 / 30%);
					}

					.sharedBookstore_borrowingCard_bindBox_topBox_textBox_bottom {
						float: left;
						width: 100%;
						margin-top: 130rpx;

						text {
							font-size: 30rpx;
							line-height: 40rpx;
							color: #fff;
							text-shadow: 0 4px 4px rgb(114 60 8 / 30%);
						}
					}
				}
			}

			.sharedBookstore_borrowingCard_bindBox_middleBox {
				float: left;
				width: 100%;
				margin-top: 60rpx;

				.sharedBookstore_borrowingCard_bindBox_middleBox_left {
					position: relative;
					float: left;
					width: calc((100% - 40rpx - 40rpx - 80rpx) / 2);
					height: 90rpx;
					margin: 0 40rpx;

					image {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						width: 100%;
						height: 90rpx;
					}

					text {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 2;
						display: block;
						width: 100%;
						height: 90rpx;
						overflow: hidden;
						font-size: 34rpx;
						line-height: 90rpx;
						color: #f4f7f4;
						text-align: center;
					}
				}

				.sharedBookstore_borrowingCard_bindBox_middleBox_left:last-child {
					margin-right: 0;
				}
			}
		}

		.sharedBookstore_borrowingCard_unboundBox_bottomBox {
			float: left;
			width: 100%;
			margin: 120rpx 0;

			text {
				float: left;
				width: 100%;
				margin-top: 10rpx;
				font-size: 30rpx;
				line-height: 40rpx;
				color: #3b3b3b;
			}
		}
	}

	.studentInformation {
		float: left;
		width: 100%;

		text {
			display: block;
			float: right;
			height: 60rpx;
			padding: 0 30rpx;
			font-size: 26rpx;
			line-height: 60rpx;
			color: #fff;
			background-color: #2ba5e0;
			border-radius: 60rpx;
		}
	}

	.studentInformation_middleBox {
		float: left;
		width: 100%;

		.studentInformation_middleBox_text {
			float: left;
			width: 100%;
			margin-top: 40rpx;
			font-size: 30rpx;
			line-height: 30rpx;
			color: #3b3b3b;

			text {
				margin-right: 20rpx;
			}
		}
	}

	.studentInformation_bottomBox {
		float: left;
		width: 100%;
		margin-top: 80rpx;

		.sharedBookstore_borrowingCard_bindBox_middleBox {
			float: left;
			width: 100%;

			.sharedBookstore_borrowingCard_bindBox_middleBox_left {
				position: relative;
				float: left;
				width: calc((100% - 30rpx) / 2);
				height: 90rpx;
				margin-right: 30rpx;

				image {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					width: 100%;
					height: 90rpx;
				}

				text {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					display: block;
					width: 100%;
					height: 90rpx;
					overflow: hidden;
					font-size: 34rpx;
					line-height: 90rpx;
					color: #3a3b3a;
					text-align: center;
				}
			}

			.sharedBookstore_borrowingCard_bindBox_middleBox_left:last-child {
				margin-right: 0;
			}
		}
	}
}
</style>
